<!--menu  -->
<template>
  <div class="menu">
    <div class="table_cpm">
      <page-table ref="myTableRef" pageName="menu" :table-config="tableConfig" @createOrEdit="handleCreateOrEdit"
        @deleteMenu="handleDeleteMenu">
        <template #menu_type="{ row }">
          {{ map.get(row.menu_type) }}
        </template>
      </page-table>
    </div>
    <page-drawer ref="pageDrawerRef" size="70%" pageName="menu">
      <el-row :gutter="20">
        <el-col :span="10">
          <el-tree class="may_tree" ref="elTreeRef" :data="menusTreeData" node-key="id" :props="defaultProps"
            :default-expanded-keys="defaultExpandedKeys" @node-click="handleClick" />
        </el-col>
        <el-col :span="14" v-if="type === 'edit'">
          <update-menu :modalFormConfig="modalFormConfig2" page-name="menu" :defaultInfo="defaultInfo"
            @updateMenuCb='handleUpdateMenuCb'>
          </update-menu>
        </el-col>
        <el-col :span="14" v-else>
          <create-menu :modalFormConfig="modalFormConfig" :defaultInfo="defaultInfo"
            @createdMenuCb='handleUpdateMenuCb'>
          </create-menu>
        </el-col>
      </el-row>
    </page-drawer>

  </div>
</template>
<script setup lang='ts' >
import { ref, computed, nextTick } from "vue"
import { tableConfig } from "./config/table.config"
import { useDrawer } from "@/hooks"
import { ElTree } from "element-plus"
import { useStore } from "@/store"

import UpdateMenu from "./cpns/update-menu.vue"
import CreateMenu from "./cpns/create-menu.vue"
import { modalFormConfig } from "./config/modal.config"
import { modalFormConfig2 } from "./config/modal.config2"
import { getMenuAndSubMenu } from "@/utils/menu-map"
const store = useStore()

// 树形控件的配置
const defaultProps = {
  children: 'children',
  label: 'menu_name',
  disabled: 'status',
}

const defaultExpandedKeys = ref()

// 配置映射关系
let map = new Map<number, string>([[0, "一级菜单"], [1, "二级菜单"], [2, '按钮']])
const defaultInfo = ref({ menu_name: "顶级菜单", id: 0 })
const type = ref('edit')
const callbackEdit = (val: any) => {
  // 注意渲染时机
  defaultInfo.value = val
  type.value = 'edit'
  nextTick(() => {
    defaultExpandedKeys.value = []
    defaultExpandedKeys.value = [val.id]
    pageDrawerRef.value.title = '修改菜单信息'
  })
}

const menusTreeData = computed(() => store.state.entireMenus)

const callbackCreated = () => {
  type.value = 'create'
  defaultExpandedKeys.value = []
  defaultExpandedKeys.value = getMenuAndSubMenu(menusTreeData.value)
  defaultInfo.value = { menu_name: "顶级菜单", id: 0 }
  pageDrawerRef.value.title = '添加菜单信息'
}
const [handleCreateOrEdit, pageDrawerRef] = useDrawer(callbackEdit, callbackCreated)
const elTreeRef = ref<InstanceType<typeof ElTree>>()


const handleClick = (val: any) => {
  defaultInfo.value = val
}
// 修改菜单
const handleUpdateMenuCb = (newVal: any) => {
  store.dispatch('menu/menuCreateOrEditAction', {newVal,pageDrawerRef})

}
// 删除菜单
const handleDeleteMenu = (val: any) => {
  let ids: any = []
  ids.push(val.id)
  function recursion(menus: any[]) {
    menus.forEach(item => {
      if (item.children && item.children.length) {
        ids.push(item.id)
        recursion(item.children)
      } else {
        ids.push(item.id)
      }
    })
  }
  recursion(val?.children ?? [])

  store.dispatch('menu/menuDelAllAction', { ids })
}


</script>
<style lang='less' scoped>
.table_cpm {
  margin-top: 15px;
}

.avatar {
  width: 65px;
  height: 65px;
  border-radius: 50%;
}
</style>
